<template>
    <el-form 
        label-position="left" 
        label-width="100px"
        :model="formData" 
        :rules="rules" 
        ref="ruleForm"
        
    >
        <el-row :gutter="24">
            <el-col :span="12">
                <el-form-item label="项目名称：" prop="name">
                    <el-input 
                        placeholder="请输入"
                        v-model="formData.name"
                        clearable    
                    />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="英文名称：" prop="english">
                    <el-input
                        placeholder="请输入"
                        v-model="formData.english"
                        clearable
                    />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="负责人：" prop="projectPerson">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.projectPerson"
                        clearable
                    />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系方式：" prop="phone">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.phone" 
                        clearable
                    />
                </el-form-item>
            </el-col>

            <el-col :span="24">
                <el-form-item label="所属区域：" prop="areaId" >
                    <el-tree-select
                        v-if="areaFlag"
                        class="customSelectTree"
                        v-model="formData.areaId"
                        :treeParams="areaOptions"
                        :select-params="{
                            // size: 'small',
                            clearable: true,
                            multiple: false,
                            collapseTags: true,
                        }"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="详细地址：" prop="address">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.address" 
                        clearable
                    />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="建筑面积：" prop="buildArea">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.buildArea"
                        clearable
                    >
                        <span slot="suffix">m²</span>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="公区面积：" prop="publicArea">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.publicArea"
                        clearable
                    >
                        <span slot="suffix">m²</span>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="租户面积：" prop="rentalArea">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.rentalArea"
                        clearable
                    >
                        <span slot="suffix">m²</span>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="车场面积：" prop="parkArea">
                    <el-input 
                        placeholder="请输入" 
                        v-model="formData.parkArea"
                        clearable
                    >
                        <span slot="suffix">m²</span>
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="项目图片：" prop="image">
                    <signUpload :maxSize="1" v-model="formData.image" />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<style lang="scss" scoped>
.customSelectTree ::v-deep.el-select.el-tree-select-input.el-popover__reference {
    width: 100% !important;
}
</style>
<script>
    import signUpload from '@/components/signUpload'
    import { addProArchiveInfo, updateProArchiveInfo, getProArchiveInfoById } from '@/api/proArchive'
    import { getAreaTree } from '@/api/regionMessage'

    function generateRule(message) {
        return [{ required: true, message, trigger: 'change' }]
    }
    export default {
        components: {
            signUpload,
        },
        props: {
            title: String,
            rowData: Object,
        },
        data() {
            const rowData = this.rowData || {}
            return {
                areaFlag: false,
                areaOptions: {
                    data: [],
                    clickParent: true, // 父级可以点击
                    props: {
                        'node-key': 'id',
                        children: 'children',
                        label: 'name',
                        value: 'id',
                    },
                    // checkStrictly: true  // 父子节点分离勾选
                },
                formData: {
                    id: rowData?.id || '',
                    name: '',
                    english: '',
                    projectPerson: '',
                    phone: '',
                    areaId: '',
                    address: '',
                    buildArea: '',
                    publicArea: '',
                    rentalArea: '',
                    parkArea: '',
                    image: '',
                },
                rules: {
                    name: generateRule('请输入项目名'),
                    english: generateRule('请输入项目英文名'),
                    projectPerson: generateRule('请输入负责人'),
                    phone: [
                        {   required: true,
                            pattern: /^(1[3456789]\d{9}|(?:\d{3,4}-)?\d{5,8})$/, // 支持手机号和座机号
                            message: '请输入正确的手机号或座机号',
                            trigger: 'change',
                        },
                    ],
                    areaId: generateRule('请选择区域'),
                    buildArea: [
                        {
                            pattern: /^(\d+)((?:\.\d+)?)$/,
                            message: '请输入数字',
                            trigger: 'change',
                        },
                    ],
                    publicArea: [
                        {
                            pattern: /^(\d+)((?:\.\d+)?)$/,
                            message: '请输入数字',
                            trigger: 'change',
                        },
                    ],
                    rentalArea: [
                        {
                            pattern: /^(\d+)((?:\.\d+)?)$/,
                            message: '请输入数字',
                            trigger: 'change',
                        },
                    ],
                    parkArea: [
                        {
                            pattern: /^(\d+)((?:\.\d+)?)$/,
                            message: '请输入数字',
                            trigger: 'change',
                        },
                    ],
                },
            }
        },
        created() {
            this.initSetModal()
            this.initArea()
            if (this.formData.id) {
                getProArchiveInfoById(this.formData.id).then((resp) => {
                    this.transformValue(resp.data)
                })
            }
        },
        methods: {
            initArea() {
                getAreaTree().then(res => {
                    if (res.code === 200) {
                        this.areaOptions.data = res.data;
                        this.areaFlag = true;
                    }
                })
            },
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        const { id } = this.formData
                        const params = {
                            ...this.formData,
                        }
                        const fetchType = id ? updateProArchiveInfo : addProArchiveInfo
                        fetchType(params).then((resp) => {
                            const { code, msg } = resp
                            if (code === 200) {
                                if (params.choose === 'choose') {
                                    this.$store.dispatch('setLogoPath', params.enterpriseLogo)
                                }
                                this.$message.success(msg)
                                this.$emit('Close', true)
                            }
                        })
                    }
                })
            },
            transformValue(data) {
                const {
                    name,
                    english,
                    projectPerson,
                    phone,
                    areaId,
                    address,
                    buildArea,
                    publicArea,
                    rentalArea,
                    parkArea,
                    image
                } = data
                Object.assign(this.formData, {
                    name,
                    english,
                    projectPerson,
                    phone,
                    areaId,
                    address,
                    buildArea,
                    publicArea,
                    rentalArea,
                    parkArea,
                    image
                })
            },
            initSetModal() {
                this.$emit('SetTitle', this.$props.title)
                this.$emit('SetPageWidth', 800)
                this.$emit('SetPageActions', [
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            this.submitForm()
                        },
                        loading: false,
                    },
                ])
            },
        },
    }
</script>
